import {Card} from "antd";
import React from "react";
import {dimValueGetter} from "echarts/src/component/marker/markerHelper";


function AlarmType(item) {
    // console.log('meta_media_url', item.meta_media_url)
    if (item.alarm_log_type === 'B') {
        return (
            <div style={{fontSize: '20px'}}>
                【{item.collector_name}】信号中断，请检查线路！
            </div>
        )
    }

    return (
        <>
            <Card type={"inner"} title={item.meta_collector_name} style={{width: '45%'}}>
                {
                    item.meta_media_url && item.meta_media_url !== 'processing' ?
                        <video src={item.meta_media_url} controls style={{width: '100%'}}></video> :
                        <div>
                            信号正在采集中，请60分钟后再次打开
                        </div>
                }
            </Card>
            <Card type={"inner"} title={item.sample_collector_name} style={{width: '45%'}}>
                {
                    item.sample_media_url && item.meta_media_url !== 'processing' ?
                        <video src={item.sample_media_url} controls style={{width: '100%'}}></video> :
                        <div>
                            信号正在采集中，请60分钟后再次打开
                        </div>

                }
            </Card>
        </>
    )
}

function AlarmCompare({item}) {
    // console.log(item)
    return (
        <div style={{display: 'flex', justifyContent: 'space-around', width: '100%'}}>
            <AlarmType {...item}/>
        </div>
    )

}

export default React.memo(AlarmCompare)
